<template>
  <div class="menu">
    <Menu mode="horizontal" :theme="theme1">
        <div class="logo">LOGO IMAGE</div>
        <a class="menu1" @mouseover="openOne()">
          <MenuItem name="1" >
              营销平台
          </MenuItem>
        </a>
        <a @mouseover="openTwo()">
          <MenuItem name="2">
              数据平台
          </MenuItem>
        </a>
        <a @mouseover="hideInit()"  @mouseleave="resume()">
          <Submenu name="3">
              <template slot="title">
                  关于我们
              </template>
              <MenuItem name="3-1">公司介绍</MenuItem>
              <MenuItem name="3-2">联系方式</MenuItem>
              <MenuItem name="3-3">招聘信息</MenuItem>
          </Submenu>
        </a>
        <a @mouseover="hideInit()"  @mouseleave="resume()">
          <Submenu name="4">
              <template slot="title">
                  <Icon type="ios-stats" />
                  共创生态
              </template>
              <MenuItem name="4-1">合作方案</MenuItem>
              <MenuItem name="4-2">百灵计划</MenuItem>
          </Submenu>
        </a>
        <a @mouseover="hideInit()"  @mouseleave="resume()">
          <Submenu name="5">
            <template slot="title">
                <Icon type="ios-stats" />
                服务支持
            </template>
            <MenuItem name="5-1">解决方案</MenuItem>
            <MenuItem name="5-2">专业服务</MenuItem>
            <MenuItem name="5-3">腾云大学</MenuItem>
          </Submenu>
        </a>
        <a @mouseover="resume()">
          <MenuItem name="6">
              文档中心
          </MenuItem>
        </a>
        <a @mouseover="resume()">
          <MenuItem name="7">
              合规与安全指南
          </MenuItem>
        </a>
        <div class="login_regist">
          <Button type="primary" size="small">登录</Button>
          <Button type="primary" size="small">注册</Button>
        </div>
    </Menu>
    <div class="next_menu" v-if="menu_id==0"> 
      <Menu mode="horizontal" :theme="theme1" active-name="11">
        <span class="font">全域分析</span>
        <MenuItem name="11">
            应用统计分析
        </MenuItem>
        <MenuItem name="12">
            游戏运营分析
        </MenuItem>
        <MenuItem name="13">
            小程序统计分析
        </MenuItem>
        <MenuItem name="14">
            运营分析平台
        </MenuItem>
      </Menu>
    </div>
    <Row>
      <Col span="12">
      </Col>
      <Col span="12">
      </Col>
    </Row>
    <!--营销平台下侧显示-->
    <Row class="menu1_Row" v-show="menu_id==1">
      <Col class="menu1_Col_l" span="6">
        <span class="menu1_span1">TalkingData营销平台</span><br/>
        <span class="menu1_span2">灵活有效的</span><br/>
        <span class="menu1_span2">数据分析和数字营销</span><br/>
        <span class="menu1_span2">一站平台</span>
      </Col>
      <Col  class="menu1_Col_r" span="18">
          <Row class="cust-div">
            <Col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="6"  v-for="item in datas" :key="item.id" > 
              <div class="detail-header"> {{item.title}}</div>
              <div class="detail-list-div" v-for="element in item.children" :key="element.id">
                <li class="detail-li">
                    <div class="detail-left">
                      <div class="left-icon">
                        <Icon :type="element.icon"  color="#2D8CF0" :size="30" />
                      </div>
                      <div class="left-content">
                        <header class="detail-title">
                          <span>{{element.title}}</span>
                        </header>
                        <span  class="detail-time">{{element.descript}}</span>
                      </div>
                    </div>
                </li>  
              </div>
          </Col>
        </Row>
      </Col>
    </Row>
    <!--数据平台下侧显示-->
    <Row class="menu1_Row" v-show="menu_id==2">
      <Col class="menu1_Col_l" span="6">
        <span class="menu1_span1">TalkingData数据平台</span><br/>
        <span class="menu1_span2">安全可靠的</span><br/>
        <span class="menu1_span2">数据服务和科技能力</span><br/>
        <span class="menu1_span2">开放平台</span>
      </Col>
      <Col  class="menu1_Col_r" span="18">
          <Row class="cust-div">
            <Col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" :xxl="6"  v-for="(item,index) in datas1" :key="item.id" > 
              <div class="detail-header"> {{item.title}}</div>
              <div class="detail-list-div" v-for="element in item.children" :key="element.id">
                <li class="detail-li">
                  <div class="detail-left">
                    <div class="left-icon">
                      <Icon :type="element.icon" color="#2D8CF0" :size="30" />
                    </div>
                    <div class="left-content">
                      <header class="detail-title">
                        <span>{{element.title}}</span>
                      </header>
                      <span  class="detail-time">{{element.descript}}</span>
                    </div>
                  </div> 
                </li> 
                <div  class="detail-list-tag" v-if="index==0">
                  <Tag class="tag" type="dot">标签数据服务</Tag>
                  <Tag  class="tag" type="dot">人群数据服务</Tag>
                  <Tag  class="tag" type="dot">风险侦测模型</Tag>
                  <Tag  class="tag" type="dot">数据安全共享</Tag>
                </div> 
              </div>
          </Col>
        </Row>
      </Col>
    </Row>
  </div>
</template>

<script>
import  './../css/menu.css'//css文件引入
export default {
  name: 'HelloWorld',
  data () {
    return {
      theme1: 'light',
      menu_id:0,
      datas:[
        {
          id:1,
          title:'全域分析',
          children:[
            {
              id:'1',
              icon:'md-flame',
              title:'应用统计分析',
              descript:'轻松集成，透析全面运营指标'
            },
              {
              id:'2',
              icon:'md-flame',
              title:'游戏运营分析',
              descript:'轻松集成，透析全面运营指标'
            },
            {
              id:'3',
              icon:'md-flame',
              title:'应用统计分析',
              descript:'轻松集成，透析全面运营指标'
            },
            {
              id:'4',
              icon:'md-flame',
              title:'应用统计分析',
              descript:'轻松集成，透析全面运营指标'
            }
          ]
        },
        {
          id:2,
          title:'全域营销',
          children:[
            {
              id:'1',
              icon:'md-flame',
              title:'应用统计分析',
              descript:'轻松集成，透析全面运营指标'
            },
              {
              id:'2',
              icon:'md-flame',
              title:'游戏运营分析',
              descript:'轻松集成，透析全面运营指标'
            }
          ]
        },
        {
          id:3,
          title:'全域监测',
          children:[
            {
              id:'1',
              icon:'md-flame',
              title:'应用统计分析',
              descript:'轻松集成，透析全面运营指标'
            },
              {
              id:'2',
              icon:'md-flame',
              title:'游戏运营分析',
              descript:'轻松集成，透析全面运营指标'
            }
          ]
        },
        {
          id:4,
          title:'实用工具',
          children:[
            {
              id:'1',
              icon:'md-flame',
              title:'应用统计分析',
              descript:'轻松集成，透析全面运营指标'
            },
              {
              id:'2',
              icon:'md-flame',
              title:'游戏运营分析',
              descript:'轻松集成，透析全面运营指标'
            }
          ]
        }
      ],
      datas1:[
        {
          id:1,
          title:'数据供给',
          children:[
            {
              id:'1',
              icon:'md-flame',
              title:'数据智能市场',
              descript:'共赢数据经济，共享数据价值'
            }
          ]
        },
        {
          id:2,
          title:'数据应用',
          children:[
            {
              id:'1',
              icon:'md-flame',
              title:'移动观象台',
              descript:'纵览行业数据，解析移动趋势'
            },
              {
              id:'2',
              icon:'md-flame',
              title:'智能选址平台',
              descript:'数据智能与科学模型助力门店选址'
            }
          ]
        }
      ]
    }
  },
  methods:{
    openOne(){
      this.menu_id=1
    },
    openTwo(){
      this.menu_id=2
    },
    hideInit(){
      this.menu_id=-1
    },
    resume(){
      this.menu_id=0
    },
  }
}
</script>


